<template>
  <view class="pwd-retrieve-container">
    <uni-forms ref="form" :value="user" labelWidth="200rpx">
      <uni-forms-item name="oldPassword" label="旧密码：">
        <uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
      </uni-forms-item>
      <uni-forms-item name="newPassword" label="新密码：">
        <uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
      </uni-forms-item>
      <uni-forms-item name="confirmPassword" label="确认密码：">
        <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
      </uni-forms-item>
    </uni-forms>

    <view class="btnBox">
      <button type="primary" @click="submit" class="btn">提交</button>
    </view>
  </view>
</template>

<script>
import { updateUserPwd } from "@/api/system/user";

export default {
  data() {
    return {
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined,
      },
      rules: {
        oldPassword: {
          rules: [
            {
              required: true,
              errorMessage: "旧密码不能为空",
            },
          ],
        },
        newPassword: {
          rules: [
            {
              required: true,
              errorMessage: "新密码不能为空",
            },
            {
              minLength: 8,
              maxLength: 20,
              errorMessage: "长度在 8 到 20 个字符",
            },
          ],
        },
        confirmPassword: {
          rules: [
            {
              required: true,
              errorMessage: "确认密码不能为空",
            },
            {
              validateFunction: (rule, value, data) => data.newPassword === value,
              errorMessage: "两次输入的密码不一致",
            },
          ],
        },
      },
    };
  },
  onReady() {
    this.$refs.form.setRules(this.rules);
  },
  methods: {
    submit() {

      console.log(uni.getS);
      this.$request({
        url: "/user/editPassword",
        method: "post",
        data: {
          id: uni.getStorageSync("user").id,
          password: this.user.oldPassword,
          newPassword: this.user.newPassword,
        },
      }).then((data) => {
        if (data.code == 200) {
          this.$toast("修改成功");
          setTimeout(() => {
            this.$store.dispatch('LogOut').then(() => {
              this.$tab.reLaunch('/pages/index')
            })
          }, 1000);
          return;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pwd-retrieve-container {
  padding: 40rpx 30rpx;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 360rpx 1fr;
  height: calc(100vh - 176rpx);
  ::v-deep .is-input-border {
    border: none;
  }
  ::v-deep .uni-forms-item {
    height: 100rpx;
    border-radius: 16rpx;
    margin-bottom: 64rpx;
    background: #ffffff;
  }
  ::v-deep .uni-easyinput__content-input {
    height: 100rpx;
    font-family: 思源黑体;
    font-size: 30rpx;
    font-weight: normal;
  }
  ::v-deep .uni-forms-item__label {
    height: 100rpx;
    padding-left: 28rpx;
    font-family: 思源黑体;
    font-size: 30rpx;
    font-weight: normal;
    color: #1c2126;
    position: relative;
    white-space: nowrap;
    &:before {
      content: "*";
      position: absolute;
      font-size: 24rpx;
      color: #f53f3f;
      top: calc(50% - 12rpx);
      left: 16rpx;
    }
  }
  ::v-deep .uni-easyinput__placeholder-class {
    font-size: 28rpx;
    font-family: 思源黑体;
  }
  ::v-deep .uni-forms-item__error {
    right: 20rpx;
    left: auto;
    font-size: 28rpx;
    font-family: 思源黑体;
    padding-top: 18rpx;
  }
  ::v-deep .uni-easyinput {
    text-align: right;
    padding-right: 20rpx;
  }
  .btnBox {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr;
    .btn {
      width: 100%;
      background: #0084ff;
      font-family: Poppins;
      font-size: 32rpx;
      font-weight: 600;
      color: #ffffff;
    }
  }
}
</style>
